<template>
	<view>
		<cu-custom bgColor="bg-gradual-blue" :isBack="true">
			<block slot="backText">返回</block>
			<block slot="content">{{ischange?'修改':'新增'}}考勤组</block>
		</cu-custom>

		<view class="cu-list menu margin-top">
			<view class="cu-item">
				<view class="content">
					<view class="title">考勤组名称</view>
				</view>
				<view class="action">
					<input style="text-align: right;" v-model="attname" placeholder="请输入考勤组名称" name="attname"></input>
				</view>
			</view>

			<view @click="goSelectPersonnel" class="cu-item">
				<view class="content">
					<view class="title">参与考勤人员</view>
				</view>
				<view class="action text-width">
					<text class="line-hide-text">{{employee}}</text>
					<image  v-if="employee==''" class="cu-add" src="../../../static/icon_add.png" mode="aspectFit"></image>
				</view>
			</view>
		</view>

		<view class="cu-list menu">
			<navigator :url="'attendance-shifts?sname='+selectShift.sname" class="cu-item arrow">
				<view class="content">
					<view class="title">考勤班次</view>
				</view>
				<view class="action">
					{{selectShift.sname}}
				</view>
			</navigator>

			<view @click="goAttTime" class="cu-item arrow">
				<view class="content">
					<view class="title">考勤时间</view>
				</view>
				<view class="content">
					<text class="line-hide-text">{{atttime}}</text>
				</view>
			</view>
		</view>
		<view class="cu-form-group margin-top">
			<view class="title">设为默认考勤组</view>
			<switch class='blue' @change="setDefaultAtte" :class="defaultAtte?'checked':''" :checked="defaultAtte?true:false"></switch>
		</view>

		<view class="bottom response">
			<button @click="saveAttGroup" :disabled="loadding" style="background-color: #5599FF;" :loading="loadding" type="primary">保存</button>
		</view>
	</view>
</template>

<script>
	function dateFormat(value) {
		switch (value) {
			case 0:
				return '一'
			case 1:
				return '二'
			case 2:
				return '三'
			case 3:
				return '四'
			case 4:
				return '五'
			case 5:
				return '六'
			case 6:
				return '日'
			default:
				return '补'
		}
	}
	export default {
		data() {
			return {
				attname: '',
				defaultAtte: false,
				loadding: false,
				selectShift: '',
				shifts: [],
				atttimes: {},
				atttime: '',
				employees: [],
				employee: '',
				personnel: '',
				ischange: false,
				groupid:''
			}
		},
		onLoad(options) {
			if (typeof(options.attgroup) != 'undefined') {
				let attdata = JSON.parse(options.attgroup)
				let shiset = JSON.parse(options.shiset)
				console.log(attdata)
				this.ischange = true
				this.attname = attdata.sname
				this.employee = attdata.personnelname
				this.groupid = attdata.id
				this.personnel = attdata.personnel
				this.atttimes.autorest = attdata.isfestival != '1'
				this.defaultAtte = attdata.defaultshit == '1'
				this.atttime = attdata.schedulinginfo

				let times = []
				for (let i = 0; i < 8; i++) {
					let shiftId = attdata[`week${i+1}`]
					let sname = shiset[shiftId]
					if (typeof(sname) == 'undefined') sname = '休息'
					let item = {
						name: i == 7 ? '补班' : '星期' + dateFormat(i),
						shiftId: shiftId,
						sname: sname,
						clicked: attdata[`week${i+1}`] != 'a'&&attdata[`week${i+1}`] != ''
					}
					times.push(item)
					// console.log(item)
				}
				this.selectShift = {
					sname:times[0].sname
				}
				this.atttimes.times = times
			}
		},
		onShow() {
			let that = this
			if (that.employees.length > 0) {
				let employee = ''
				let personnel = ''
				let needremove = []
				that.employees.forEach(function(item) {
					employee += item.name + ','
					personnel += item.id + ','
					if (item.shitid != null && item.shitid != '') {
						needremove.push(item)
					}
				})
				if (needremove.length > 0) {
					uni.showModal({
						title: '提示',
						content: needremove[0].name + '等' + needremove.length + '人已在其它考勤组，是否改为到此考勤组中考勤？',
						success(res) {
							if (res.confirm) {
								that.removeEmployee(needremove)
								that.employee = employee
								that.personnel = personnel
							} else {
								that.employees = []
							}
						}
					})
				} else {
					that.employee = employee
					that.personnel = personnel
				}
			}
		},
		watch: {
			atttimes(newvalue) {
				if (newvalue == "{}") return
				let that = this
				let rest = ''
				let work = ''
				newvalue.times.forEach(function(item, index) {
					if (item.clicked) {
						work += dateFormat(index)
					} else {
						rest += dateFormat(index)
					}
					that.atttime = '休息（每周' + rest + '),' + that.selectShift.sname + '(每周' + rest + ')'
				})
			}
		},
		methods: {
			goSelectPersonnel(){
				console.log(this.personnel)
				uni.navigateTo({
					url:'../../main/employee/select-employee?personnel='+this.personnel
				})
			},
			setDefaultAtte(e) {
				this.defaultAtte = e.detail.value
			},
			goAttTime() {
				if (this.selectShift == '') {
					uni.showToast({
						title: '请选择考勤班次',
						icon: 'none'
					})
					return
				} else {
					let atttimes = JSON.stringify(this.atttimes)
					uni.navigateTo({
						url: 'attendance-time?selectShift=' + JSON.stringify(this.selectShift) + '&atttimes=' + atttimes
					})
				}
			},
			removeEmployee(needremove) {
				let personid = ''
				needremove.forEach(function(item) {
					personid += item.id + ','
				})
				console.log(personid)
				uni.request({
					url: this.$constant.BASEURL + this.$constant.REMOVE_ATTENDANCE_PERSON,
					method: "POST",
					header: {
						'content-type': 'application/x-www-form-urlencoded'
					},
					data: {
						username: getApp().globalData.username,
						token: getApp().globalData.token,
						unitno: getApp().globalData.orgcode,
						id: personid
					},
					success: (res) => {
						let data = res.data.data
						if (res.data.code == 0) {
							console.log("remove success")
							this.employees.forEach(function(item) {
								item.shitid = ''
							})
						} else {
							uni.showToast({
								title: res.data.message,
								icon: 'none'
							})
						}
					}
				});
			},
			checkInfo() {
				if (this.attname == '') {
					uni.showToast({
						title: '请输入考勤组名称',
						icon: 'none'
					})
					return false
				}
				if (this.personnel == '') {
					uni.showToast({
						title: '请选择考勤人员',
						icon: 'none'
					})
					return false
				}
				if (this.selectShift == '') {
					uni.showToast({
						title: '请选择考勤班次',
						icon: 'none'
					})
					return false
				}
				if (this.atttime == '' || this.atttimes == '{}') {
					uni.showToast({
						title: '请选择考勤时间',
						icon: 'none'
					})
					return false
				}
				return true
			},
			saveAttGroup() {
				if (this.checkInfo()) {
					// console.log(this.atttimes)
					let params = {
						username: getApp().globalData.username,
						token: getApp().globalData.token,
						unitno: getApp().globalData.orgcode,
						defaultshit: this.defaultAtte ? 1 : 0,
						personnel: this.personnel,
						sname: this.attname,
						isfestival: this.atttimes.autorest ? 1 : 2,
						stype: 1
					}
					if(this.ischange){
						params.id = this.groupid
					}
					this.atttimes.times.forEach(function(item, index) {
						params[`week${index+1}`] = item.shiftId
					})
					console.log(params)
					uni.request({
						url: this.$constant.BASEURL + this.$constant.ADD_ATTENDANCT_GROUP,
						method: "POST",
						header: {
							'content-type': 'application/x-www-form-urlencoded'
						},
						data: params,
						success: (res) => {
							let data = res.data.data
							if (res.data.code == 0) {
								uni.showToast({
									title: res.data.message,
								})
								uni.navigateBack({
									delta: 1
								})
							} else {
								uni.showToast({
									title: res.data.message,
									icon: 'none'
								})
							}
						}
					});
				}
			}
		}
	}
</script>

<style>
	.line-hide-text {
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box; //作为弹性伸缩盒子模型显示。
		-webkit-box-orient: vertical; //设置伸缩盒子的子元素排列方式--从上到下垂直排列
		-webkit-line-clamp: 1; //显示的
	}

	.cu-add {
		width: 40upx;
		height: 40upx;
	}

	.height {
		min-height: 120upx;
	}
	
	.text-width{
		width: 300upx;
		text-align:right;
	}
	
	.bottom {
		background-color: #FFFFFF;
		padding: 30upx;
		position: fixed;
		bottom: 0;
	}

	.blue {}
</style>
